<template>
  <div id="riskDetails">
    <div id="left">
      <div style="margin-left:478px;background-color: #fff;padding-bottom: 20px;" id="leftone">
        <div class="header" v-if="detaildata['basics'] != null">
          <p v-if='showreport' class="bigleft">
            <at-tooltip :content= "detaildata['basics'].risk_event_name" :placement="'top'">
              <span style="font-size: 14px;display: inline-block; max-width: 500px;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">
               {{ detaildata['basics'].risk_event_name }}报告
              </span>
            </at-tooltip>
          </p>
          <p v-else class="bigleft">
            <at-tooltip :content= "detaildata['basics'].risk_event_name" :placement="'top'">
              <span style="font-size: 14px;display: inline-block; max-width: 500px;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">
               {{ detaildata['basics'].risk_event_name }}包含的日志信息
              </span>
            </at-tooltip>
          </p>
        </div>
        <div style="float:right;position:relative;top:-40px;right:20px" id="buttonone">
          <div v-if='showreport' style="display:inline-block;">
            <at-button type='primary' :disabled="!(detaildata.iscommit == 0 && $route.query.analysisid == null)" @click="xiugai">修改</at-button>
            <at-button type="primary" :disabled="!(detaildata.iscommit == 0 && $route.query.analysisid == null)" @click="shanchu">删除</at-button>
            <at-button type="primary" :disabled="detaildata.iscommit != '0'" @click="submittijiao">提交预警</at-button>
          </div>
          <at-button id="exportPdfone" type='primary' @click="emergency" v-if="$route.query.analysisid != null && appendix.len>0" >{{ buttonname }}</at-button>
          <at-button id="exportPdf" type="primary" @click='downloadPdf'><i class="saas-icon-res-down" style="font-size:20px;vertical-align: middle;"></i>PDF下载</at-button>
        </div>
        <div style="margin-top:20px;margin-left:20px;margin-right:20px;padding-bottom:20px" v-if='showreport'>
          <div style="border:1px solid #eee" v-if="detaildata['basics'] != null">
              <div class="header">
                  <span class="bigleft" style=" font-size: 12px">风险事项信息</span>
              </div>
              <div>
                <table>
                  <tr>
                    <td class="basictitle"><span>风险事项名称</span></td>
                    <td class="basiccontent"><span class="blue">{{detaildata['basics'].risk_event_name}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>风险事项等级</span></td>
                    <td class="basiccontent">
                      <span v-html="detaildata['basics'].risk_event_level == '1' ? '一般' : detaildata['basics'].risk_event_level == '2' ? '较大' : detaildata['basics'].risk_event_level == '3' ? '重大' : '特大'">
                        {{detaildata['basics'].risk_event_level}}
                      </span>
                    </td>
                    <td class="basictitle"><span>风险事项类型</span></td>
                    <td class="basiccontent"><span>{{detaildata['basics'].risk_event_type}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>依据</span></td>
                    <td class="basiccontent">
                      <span v-if="detaildata['basics'].analysis_basis" style="color:rgb(31, 146, 239);cursor:pointer" @click="download(detaildata['basics'].analysis_basis)">
                        {{detaildata['basics'].analysis_basis.split('/')[detaildata['basics'].analysis_basis.split('/').length-1]}}
                      </span>
                      <span v-else>-</span>
                    </td>
                    <td class="basictitle"><span>风险事项来源</span></td>
                    <td class="basiccontent"><span class="blue">{{detaildata['basics'].risksource}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>创建时间</span></td>
                    <td class="basiccontent" v-if="detaildata['basics'].r_time != null">
                      <span>{{detaildata['basics'].r_time.substring(0,10)}}</span>
                      <!--  -->
                    </td>
                    <td class="basictitle"><span>创建人</span></td>
                    <td class="basiccontent"><span>{{detaildata['basics'].r_person}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>风险事项描述</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="blue" v-if="detaildata['basics'].risk_event_content">
                        {{detaildata['basics'].risk_event_content}}
                      </span>
                      <span v-else>-</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>解决方案</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="blue" v-if="detaildata['basics'].solution">
                        {{detaildata['basics'].solution}}
                      </span>
                      <span v-else>-</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>备注</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="blue" v-if="detaildata['basics'].remark">
                        {{detaildata['basics'].remark}}
                      </span>
                      <span v-else>-</span>
                    </td>
                  </tr>
                </table>
              </div>
          </div>
          <!-- 修改删除提交功能项 -->
          <!-- <div style="height:30px;padding-top:20px" v-if="$route.query.iscommit == 0">
            <div style="float:right;position:relative;right:20px">
              <at-button  type='primary' v-if="$route.query.iscommit == 0 && $route.query.analysisid == null" @click="xiugai">修改</at-button>
              <at-button  type="primary" v-if="$route.query.iscommit == 0 && $route.query.analysisid == null" @click="shanchu">删除</at-button>
              <at-button  type="primary" v-if="$route.query.iscommit == 0 && istijiao == '0'" @click="submittijiao">提交</at-button>
            </div>
          </div> -->
          <!-- 修改弹出框 -->
          <at-dialog title="修改风险事项"  :visible.sync="dialogVisible" size="small">
            <at-form ref="update" label-width='110px' :model="update" :rules="rules">
              <at-form-item label="风险事项名称" prop="ariskname" project="mh">
                <at-input v-model="update.ariskname"></at-input>
              </at-form-item>
              <at-form-item label="风险事项类型" prop = "risktype" project="mh">
                <at-select  v-model = "update.risktype" plceholder="标志为">
                  <at-option
                    v-for="item in risktype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </at-option>
                </at-select>
              </at-form-item>
              <at-form-item label="风险事项等级" prop="risklevel" project="mh">
                <at-select  v-model="update.risklevel" plceholder="标志为">
                  <at-option
                    v-for="item in risklevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </at-option>
                </at-select>
              </at-form-item>
              <at-form-item label="风险事项描述" project="mh">
                <at-input v-model="update.riskdescribe" placeholder="请输入风险事项描述" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"/>
              </at-form-item>
              <at-form-item label="解决方案" project="mh">
                <at-input v-model="update.risksolution" placeholder="请输入解决方案" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"/>
              </at-form-item>
              <at-form-item label="备注" project="mh">
                <at-input v-model="update.remark" placeholder="请填写备注" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"/>
              </at-form-item>
              <at-form-item>
                <at-button type="primary" @click="submitupdate('update')">立即修改</at-button>
                <at-button @click="resetupdate('update')">取消</at-button>
              </at-form-item>
            </at-form>
            <!-- <div style="text-align: center;margin-top: -26px;height: 50px;line-height: 50px;">
              <at-button type="primary" @click="submitupdate('update')">立即修改</at-button>
              <at-button @click="resetupdate('update')">取消</at-button>
            </div> -->
          </at-dialog>
          <div class="basic" style="margin-top: 20px;" v-for="(key, value) in correlation" :key="value">
              <div class="header">
                <at-tooltip :content= "key.element_name" :placement="'top'">
                  <span class="bigleft" style="font-size: 12px;max-width: 93%;white-space: nowrap;text-overflow: ellipsis;overflow:hidden;">关键风险:{{key.element_name}}</span>
                </at-tooltip>
              </div>
              
              <!--影响范围 -->
              <div  class="basicborder" >
                <span class="fontheight">
                影响范围
                </span>
                <table>
                  <tr>
                    <td class="basictitle"><span>影响机构：</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="nodeclass">
                        {{key.effect_agency}}
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>影响系统：</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="nodeclass">
                        {{key.effect_info_sys}}
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>影响节点：</span></td>
                    <td class="basiccontent" colspan="5">
                      <span class="nodeclass">
                        {{key.effect_sys_node}}
                      </span>
                    </td>
                  </tr>
                </table>
              </div>
              <!--相关攻击事件 -->
              <div class="basicborder" v-for="(item,value) in key.attack">
                <span class="fontheight">
                相关攻击事件
                </span>
                <table>
                  <tr>
                    <td class="basictitle"><span>事件名称</span></td>
                    <td class="basiccontent" colspan="5"><span class="blue">{{item.risk_event_name}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>攻击次数</span></td>
                    <td class="basiccontent"><span class="blue">{{item.attack_num}}</span></td>
                    <td class="basictitle"><span>威胁级别</span></td>
                    <td class="basiccontent">
                      <span
                        class="blue"
                        :class="['risklevel',item.risk_event_level == '1' ? 'LowRisk' : item.risk_event_level == '2' ? 'MiddleRisk' : item.risk_event_level == '3' ? 'HighRisk' : 'SeriousRisk']"
                        v-html="item.risk_event_level == '1' ? '低 危' : item.risk_event_level == '2' ? '中 危' : item.risk_event_level == '3' ? '高 危' : '严 重'">
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>首次攻击时间</span></td>
                    <td class="basiccontent"><span class="blue">{{item.start_time}}</span></td>
                    <td class="basictitle"><span>最近攻击时间</span></td>
                    <td class="basiccontent"><span class="blue">{{item.new_time}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>事件描述</span></td>
                    <td class="basiccontent" colspan="5"><span class="blue">{{item.risk_event_content}}</span></td>
                  </tr>
                </table>
              </div>

              <!--相关风险事项 -->
              <div class="basicborder" v-for="(one,value) in key.history" :key="value">
                <span class="fontheight">
                相关风险事项
                </span>
                <table>
                  <tr>
                    <td class="basictitle"><span>事项名称</span></td>
                    <td class="basiccontent" colspan="5"><span class="blue">{{one.risk_event_name}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>事项等级</span></td>
                    <td class="basiccontent"><span class="blue" v-html="one.risk_event_level == '1' ? '一般' : one.risk_event_level == '2' ? '较大' : one.risk_event_level == '3' ? '重大' : '特大'">{{one.risk_event_level}}</span></td>
                    <td class="basictitle"><span>事项类型</span></td>
                    <td class="basiccontent"><span class="blue">{{one.risk_event_type}}</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>事项描述</span></td>
                    <td class="basiccontent" colspan="5"><span class="blue">{{one.risk_event_content}}</span></td>
                  </tr>
                </table>
              </div>

              <!--相关情报事件 -->
              <!-- <div class="basicborder">
                <span class="fontheight">
                相关情报
                </span>
                <table>
                  <tr>
                    <td class="basictitle"><span>关键要素</span></td>
                    <td class="basiccontent"><span class="blue">derailsData[0].risk_event_name</span></td>
                    <td class="basictitle"><span>情报获取时间</span></td>
                    <td class="basiccontent"><span class="blue">derailsData[0].risk_event_name</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>情报类型</span></td>
                    <td class="basiccontent"><span class="blue">derailsData[0].risk_event_name</span></td>
                    <td class="basictitle"><span>来源</span></td>
                    <td class="basiccontent"><span class="blue">derailsData[0].risk_event_name</span></td>
                  </tr>
                  <tr>
                    <td class="basictitle"><span>情报描述</span></td>
                    <td class="basiccontent" colspan="5"><span class="blue">derailsData[0].risk_event_name</span></td>
                  </tr>
                </table>
              </div> -->
          </div>
        </div>
        <div v-else style="margin-left:20px;margin-right:20px;">
            <!-- <span style=" display: inline-block;height: 40px;line-height: 40px;">
                此次风险事项，共监测到要素{{appendix['statistical'].sumelement}}
                个，共影响节点数量{{appendix['statistical'].sys_node_num}}个，
                共影响机构数量{{appendix['statistical'].info_sys_num}}个
            </span> -->
            <span style="display:inline-block;"></span>
            <div v-for="(val, index) in appendix['warninfos']" :key='index' style="border-left:1px solid #eee;border-right:1px solid #eee;border-top:1px solid #eee;margin-bottom: 20px;">
              <div class="header">
                <at-tooltip :content= "val.element_name" :placement="'top'">
                  <!-- <span class="bigleft" style="font-size: 12px;max-width: 93%;white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"> -->
                  <span class="bigleft" style="font-size: 12px">
                    关键要素：{{val.element_name}}
                  </span>
                </at-tooltip>
                <div style="float:right;margin-right:20px;line-height: 50px;">日志数量：{{val.logs.length}}</div>
              </div>
              <div  class="basicborder" style="padding:20px;">
                <at-table style="width:100%"  :data="val.logs" :show-header="true" >
                  <at-table-column label="发生时间"
                                  :show-overflow-tooltip="true"
                                   prop="ts"
                                   width='120px'>
                  </at-table-column>
                  <at-table-column label="系统名称"
                                  :show-overflow-tooltip="true"
                                   prop="sys_name"
                                   width='150px'>
                  </at-table-column>
                  <at-table-column label="严重级别"
                                  :show-overflow-tooltip="true"
                                   prop="log_level"
                                   width='100px'>
                    <template v-slot="scope">
                      <span v-if="scope.row.log_level" :class="['level-tag',scope.row.log_level === 0?'level-tag-normal':scope.row.log_level === 1?'level-tag-low-risk':scope.row.log_level === 2?'level-tag-middle-risk':scope.row.log_level === 3?'level-tag-high-risk':'level-tag-serious']">
                        {{scope.row.log_level === undefined ? ' ': `${translateChineseLevel(scope.row.log_level)}`}}
                      </span>
                      <span class="level" v-else>--</span>  
                    </template>
                  </at-table-column>
                  <at-table-column label="描述"
                                  :show-overflow-tooltip="true"
                                   prop="describes">
                  </at-table-column>
                  <at-table-column label="日志类型"
                                  :show-overflow-tooltip="true"
                                   prop="log_type_cn"
                                   width='120px'>
                  </at-table-column>
                  <at-table-column label="来源"
                                  :show-overflow-tooltip="true"
                                  width='120px'>
                    <template slot-scope="scope">
                      <span>{{translateChinese('source', scope.row.log_type)}}</span>
                    </template>
                  </at-table-column>
                </at-table>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div id="right">
      <div style=" background-color: #fff;">
          <div class="operation">
            <span style="margin-left:20px;font-size: 14px;color: #5c6781;line-height: 50px; font-weight: bold">风险事项操作记录</span>
          </div>
          <warn-timeline :TimeLine="TimeLineData||[]"></warn-timeline>
      </div>
    </div>
  </div>
</template>
<script>
import warnTimeline from '../../../components/warningslls/timeline/timeline.vue'
import html2canvas from '../../../utils/html2canvas.js'
import jsPDF from '../../../utils/jspdf.min.js'
import { mixin } from '../../../models/safeEvents/utils/util'

export default {
  name: 'riskDetails',
  components: {warnTimeline},
  mixins: [mixin],
  data () {
    var namerepetition = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入风险事项名称'))
      } else if (value.length > 128) {
        callback(new Error('风险事项名称过长'))
      } else {
        let DataValidation = function (value) {
          if (value === 'success') {
            callback()
          } else {
            callback(new Error('风险事项名称重复'))
          }
        }
        this.$store.dispatch('riskEvents/riskverify', { 'value': value, 'DataValidation': DataValidation, 'eventid': this.$route.query.eventid })
      }
    }
    return {
      path: this.$route.fullPath,
      detaildata: {},
      correlation: {},
      showreport: true,
      buttonname: '查看日志',
      TimeLineData: [],
      dialogVisible: false,
      update: {
        riskid: '',
        ariskname: '',
        risktype: '',
        risklevel: '',
        risksolution: '',
        riskdescribe: '',
        remark: ''
      },
      risktype: [{ value: '新兴', label: '新兴' }, {value: '流行', label: '流行'}, {value: '高危', label: '高危'}, {value: '攻击类', label: '攻击类'}],
      risklevel: [{value: 4, label: '特大'}, {value: 3, label: '重大'}, {value: 2, label: '较大'}, {value: 1, label: '一般'}],
      rules: {
        ariskname: {validator: namerepetition, trigger: 'blur', required: true},
        risktype: {trigger: 'blur', required: true, message: '请选择风险事项类型'},
        risklevel: {required: true, message: '请选择风险事项等级'},
        riskdescribe: {trigger: 'blur', required: true, message: '请输入风险事项描述'},
        risksolution: {trigger: 'blur', required: true, message: '请输入解决方案'},
        remark: {trigger: 'blur', required: true, message: '请输入备注'}
      },
      appendix: {}
    }
  },
  computed: {

  },
  updated () {
  },
  created () {
    this.$store.dispatch('riskEventsDerails/InitialValue', {data: {'id': this.$route.query.eventid}, fun: this.setitem})
    this.$store.dispatch('riskEventsDerails/alarmlog', {data: {'id': this.$route.query.eventid}, fun: this.setitem})
    // console.log(this.$route.query.analysisid)
  },
  props: {
    closetabs: { type: Function }
  },
  methods: {
    download (rows) {
      if (rows !== 'null') {
        this.$store.dispatch('riskEventsDerails/download', {data: {'url': rows}})
      }
    },
    submittijiao () {
      this.$store.dispatch('riskEvents/tijiao', { data: {'arisk_event_id': this.$route.query.eventid}, fun: this.setitem, eventId: {'id': this.$route.query.eventid} })
      // setTimeout(() => {
      //   this.closetabs(this.path, 'remove')
      // }, 500)
      // this.$router.push({ 'path': '/monitor/riskEvents' })
    },
    // 将vuex里的值转化为定值，防止页面刷新数据丢失
    setitem (item, value) {
      this[item] = value
    },
    emergency () {
      if (this.buttonname === '查看日志') {
        this.showreport = false
        this.buttonname = '查看报告'
      } else if (this.buttonname === '查看报告') {
        this.showreport = true
        this.buttonname = '查看日志'
      }
    },
    downloadPdf () {
      document.querySelector('#buttonone').style.display = 'none'
      html2canvas(document.querySelector('#leftone')).then(canvas => {
        var contentWidth = canvas.width
        var contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89
        // 未生成pdf的html页面高度
        var leftHeight = contentHeight
        // 页面偏移
        var position = 0
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28
        var imgHeight = 592.28 / contentWidth * contentHeight

        var pageData = canvas.toDataURL('image/jpeg', 1.0)

        var pdf = new jsPDF('', 'pt', 'a4')

        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            // 避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage()
            }
          }
        }
        pdf.save(`${this.detaildata['basics'].risk_event_name}报告.pdf`)
        document.querySelector('#buttonone').style.display = 'block'
      })
    },
    xiugai () {
      if (this.dialogVisible) {
        this.dialogVisible = false
      } else {
        this.dialogVisible = true
      }

      this.update.riskid = this.$route.query.eventid
      this.update.ariskname = this.detaildata['basics'].risk_event_name
      this.update.risktype = this.detaildata['basics'].risk_event_type
      if (this.detaildata['basics'].risk_event_level === '1') {
        this.update.risklevel = '一般'
      } else if (this.detaildata['basics'].risk_event_level === '2') {
        this.update.risklevel = '较大'
      } else if (this.detaildata['basics'].risk_event_level === '3') {
        this.update.risklevel = '重大'
      } else {
        this.update.risklevel = '特大'
      }
      this.update.risksolution = this.detaildata['basics'].solution
      this.update.riskdescribe = this.detaildata['basics'].risk_event_content
      this.update.remark = this.detaildata['basics'].remark
    },
    submitupdate (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.update.risklevel === '一般') {
            this.update.risklevel = '1'
          } else if (this.update.risklevel === '较大') {
            this.update.risklevel = '2'
          } else if (this.update.risklevel === '重大') {
            this.update.risklevel = '3'
          } else if (this.update.risklevel === '特大') {
            this.update.risklevel = '4'
          }
          let data = JSON.parse(JSON.stringify(this.update))
          this.$store.dispatch('riskEvents/riskData/update', {'data': data, 'resData': {'id': this.$route.query.eventid, fun: this.setitem}})
          this.dialogVisible = false
          this.$refs[formName].resetFields()
        } else {
          return false
        }
      })
    },
    shanchu () {
      this.$store.dispatch('riskEvents/delect', {
        'arisk_event_id': this.$route.query.eventid
      })
      setTimeout(() => {
        this.closetabs(this.path, 'remove')
      }, 500)
      this.$router.push({ 'path': '/monitor/riskEvents' })
    },
    // 新增取消函数
    resetupdate (formName) {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
    },
    translateChineseLevel (level) {
      switch (level) {
        case 1:
          return '低危'
        case 2:
          return '中危'
        case 3:
          return '高危'
        case 4:
          return '严重'
      }
    }
  }
}
</script>
<style lang="less">
#riskDetails{
  .at-form-item__error{
    float: left;
  }
  .at-input .at-textarea__inner{
    margin-bottom: 0;
  }
  .at-dialog-box{
    .at-dialog--small{
      width: 600px;
    }
    .at-form-item{
      margin-right: 0;
      &:last-child {
        .at-form-item__content{
          margin-left: 0 !important;
        }
      }
    }
    .at-form-item__content{
      margin-right: 0;
    }
  }
  .UnitMergeinfo{
    background: #F8F9FA;
    height: 40px;
    line-height: 40px;
  }
  .nodeclass{
    margin-left: 10px;
    display: inline-block;
  }
  .operation{
    height: 50px;
    overflow: hidden;
    // background-color: #fff;
    border-bottom: 1px solid #eeeeee;
  }
  #left{
    width: 100%;
    float: left;
    margin-left: -478px;
  }
  #right{
    width: 458px;
    float: right;
    background-color: #fff;
  }
  .fontheight{
    display: inline-block;
    line-height: 50px;
    margin-left: 20px;
  }
  .basicborder{
    border-bottom: 1px solid #eee;
  }
  .basiccontent{ 
    width: 391px;
    height: 40px;
    word-break: break-all;
  }
  .basictitle{
    width: 170px;
    height: 40px;
  }
  .basictitle span{
    display: block;
    margin-right: 40px;
    float: right;
    color: #5c6781;
    font-size:12px;
  }
  .basic{
    border: 1px solid #eee;
    border-bottom: 0px;
  }
  .header{
    height: 50px;
    border-bottom: 1px solid #eee;
  }
  .bigleft{
    line-height: 50px;
    display: inline-block;
    margin-left: 20px;
    color: #5c6781;
    font-weight: bold;
  }
}
</style>
<style scoped>
@import '../eventManagement/style/tag.css';
</style>